<script setup lang="ts">
import { PAGING } from '@/constant'
// ------------------use------------------
// #region
const { vLoading, withLoading } = useDefineLoading()
const [tableData, setTableData] = useState<any[]>([])
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  await withLoading(sleep)(1000)
  setTableData(Array.from({ length: 24 }).fill(0))
}
function reset() {
  getTableData()
}
function save() {
  getTableData()
}
// #endregion
</script>

<template>
  <div
    class="flex-direction padding-sm overflow box-border flex gap-sm align-end container"
  >
    <div class="flex-incompressible width-fill">
      <el-button plain type="primary" @click="save">
        保存
      </el-button>
      <el-button plain @click="reset">
        取消
      </el-button>
    </div>
    <el-table
      v-loading
      :data="tableData"
      class="flex-fillRemaining width-fill"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="编码">
        <template #default="{ $index }">
          {{ String($index).padStart(2, '0') }}
        </template>
      </el-table-column>
      <el-table-column label="名称">
        全厂
      </el-table-column>
      <el-table-column label="备注">
        ---
      </el-table-column>
    </el-table>

    <el-pagination
      hide-on-single-page
      :page-sizes="PAGING.PAGE_SIZES"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100"
      background
      class="flex-incompressible margin-top-xs"
    />
  </div>
</template>

<style lang="scss" scoped>
.el-tabs {
  margin: -20px 0;
}
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
